<template>
  <div>
    <!-- 顺序设置 -->
            <el-dialog title="顺序设置" :visible.sync="sequenceshow" width="40%" :before-close="handleClose">
                <div class="mainpadding topline">
                    <div class="msg mainpadding radius">
                        <i class="el-icon-warning" style="color: #ffa811;font-size: 18px;"></i>
                        顺序开启后，所有签署方将按照设置的顺序依次签署文件
                    </div>
                    <div class="flexleft margin-top2">
                        <div class="leftline"></div>
                        <div class="margin-right3 titletext">按顺序签署</div>
                        <el-switch v-model="value1" active-text="是" inactive-text="否">
                        </el-switch>
                    </div>
                    <div class="flexleft margin-top3">
                        <div class="leftline"></div>
                        <div class="margin-right3 titletext">顺序设置</div>
                        <span style="color: #ffa811;">上下拖拽“签署方”排序</span>
                    </div>
                    <div class="flexcenter margin-top3 titletext">签署顺序</div>
                    <ul style="padding:20px 20px 20px 80px">
                        <li class="margin-top1 flexleft" v-for="(items, index) in tzlist" :key="items.name" draggable="true"
                            @dragstart="handleDragStart($event, items)" @dragover.prevent="handleDragOver($event, items)"
                            @dragenter="handleDragEnter($event, items)" @dragend="handleDragEnd($event, items)">
                            <p class="itemyuan margin-right1">{{ index + 1 }}</p>
                            <div class="itemsx">
                                <!-- <span class="qiyeselect">企业</span> -->
                                <span class="gerenselect margin-right1">个人</span>
                                {{ items.name }}
                            </div>
                        </li>
                    </ul>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
  </div>
</template>

<script>
export default {
    name:"SequenceSet",
    props:["sequenceshow"],
    data(){
        return{
            // 拖拽数据
            tzlist: [
                { name: "内容1" }, { name: "内容2" }, { name: "内容3" }, { name: "内容4" }, { name: "内容5" },
            ],
            dragging: null,
            // 拖拽数据结束
            value1: false,

        }
    },
    methods:{
        handleClose(done) {
            done();
        },
         // 拖拽数据
        handleDragStart(e, items) {
            this.dragging = items;//开始拖动时，暂时保存当前拖动的数据。
        },
        handleDragEnd(e, items) {
            this.dragging = null;//拖动结束后，清除数据
        },
        handleDragOver(e) {
            e.dataTransfer.dropEffect = 'move';//在dragenter中针对放置目标来设置!
        },
        handleDragEnter(e, items) {
            e.dataTransfer.effectAllowed = "move";//为需要移动的元素设置dragstart事件
            if (items == this.dragging) return;
            var newItems = [...this.tzlist];//拷贝一份数据进行交换操作。
            var src = newItems.indexOf(this.dragging);//获取数组下标
            var dst = newItems.indexOf(items);
            newItems.splice(dst, 0, ...newItems.splice(src, 1));//交换位置
            this.tzlist = newItems;
        },
        // 拖拽数据结束
    }
}
</script>

<style lang="scss" scoped>
    .msg {
    background-color: #fff6e7;
    font-size: 16px;
}
.topline {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.leftline {
    margin-right: 15px;
    width: 3px;
    height: 18px;
    background-color: #1063f1;
}.titletext {
    font-size: 18px;
}
.itemyuan {
    width: 30px;
    height: 30px;
    background-color: #fff6e5;
    color: #f38d14;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
.itemsx {
    background-color: #f7f8fa;
    border-radius: 5px;
    padding: 10px 20px;
    width: 90%;
}
.gerenselect {
    background-color: #fff6e6;
    border: 1px solid #e6970f;
    border-radius: 3px;
    color: #e6970f;
    padding: 0 3px;
}
</style>